<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欣雨防伪溯源系统</title>
    <!--引入统一头-->
    <head th:include="import/head::head"></head>
</head>
<body>`


<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="margin: 20px auto;">
    <form class="layui-form">
        <input type="hidden" name="uuid" th:value="${uuid}" />
        <input type="hidden" name="id" th:value="${commodity?.id}" />
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="name" placeholder="商品名称" autocomplete="off"
                       lay-verType="tips" lay-verify="required" required th:value="${commodity?.name}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产地</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="place" placeholder="产地" autocomplete="off"
                       lay-verType="tips" lay-verify="required" required th:value="${commodity?.place}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">经销商</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="distributor" placeholder="经销商"
                       lay-verType="tips" required th:value="${commodity?.distributor}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="unitPrice" placeholder="单价"
                       lay-verType="tips" required th:value="${commodity?.unitPrice}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="layuiUploadifys">选择文件</button>
            </div>
            <div th:if="${not #lists.isEmpty(commodityPicList)}" th:each="item:${commodityPicList}" th:id="'pic_' + ${item.id}">
                <img th:src="@{'/commodityPic/' + ${item.id} + '/view'}" /><br/>
                <button value="删除" th:onclick="'javascript:deletePic(\''+${item.id}+'\')'" />
            </div>
        </div>
    </form>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>

<script th:replace="import/script::script"></script>
<script>
    layui.use(['form', 'upload','element'], function() {
        var $ = layui.$;
        var upload = layui.upload; //得到 upload 对象
        var element = layui.element;

        upload.render({
            elem: '#layuiUploadifys'  //绑定元素
            ,url: '/[[${uuid}]]/commodityPicUpload'
            //,auto: false //选择文件后不自动上传
            //,bindAction: '#upload' //指向一个按钮触发上传
            ,multiple:true  //是否允许多文件上传
            ,number:9
            ,accept : 'file'//允许上传的文件类型
            ,exts : 'jpg|png|bmp|jpeg' //只允许上传jpg|pdf文件
            ,size: 10 * 1024  //设置文件最大可允许上传的大小，单位 KB
            ,before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    var number = Math.random();
                    $("#layuiUploadifys").parent().append("<div id='pic_" + number + "'><img src=\"" + result + "\" /><button value=\"删除\" onclick=\"deleteOne(" + number + ")\" /></div>")
                });
            }
            ,done : function(res) { //执行上传请求后的回调。
                layer.msg(res.msg);
            }
            ,error: function(index, upload){
                //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                alert("上传失败");
            }
        });

        function deletePic(picId) {
            layer.confirm("确定删除？", function () {
                layer.load(2);
                $.ajax({
                    type: "delete",
                    url: picId + "/delete",
                    data: {id : picId},
                    dataType: "json",
                    success: function (res) {
                        if (200 === res.code) {
                            $("#pic_" + picId).remove();
                            layer.msg("操作成功");
                        } else {
                            layer.msg(res.msg, {icon: 5, time: 1500});
                        }
                    },
                    error: function () {
                        layer.closeAll('loading');
                        layer.msg("删除错误", {icon: 5});
                    }
                });
            });
        }

        function deleteOne(picId) {
            $("#pic_" + picId).remove();
        }
    });
</script>
</body>
</html>
